<template>
  <div id="attributeList">
    <h1 class="con-right-title">
      属性管理
    </h1>
    <div class="bottom-box">
      <!--table-->
      <div class="table">
        <!--上部搜索条件-->
        <topSearch :form-inline="formInline"></topSearch>
        <!-- 操作按钮 -->
        <div class="table-conBtn">
          <el-button type="warning" @click="handleMessageSet">
            消息设置
          </el-button>
          <el-button type="warning" plain @click="handleCondition">
            条件用户
          </el-button>
        </div>
        <!--下部table-->
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column type="index" width="60" align="center" label="序号">
            <template slot-scope="scope">
              {{ scope.$index | filterPage(searchParams.pageNum, searchParams.pageSize) }}
            </template>
          </el-table-column>
          <el-table-column
            label="大鹏号"
            prop="dapengNum"
            min-width="100"
          ></el-table-column>
          <el-table-column
            label="昵称"
            prop="nickName"
            min-width="150"
          ></el-table-column>
          <el-table-column
            label="手机号"
            prop="phone"
            min-width="120"
          ></el-table-column>
          <el-table-column label="状态" prop="status" min-width="100">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="0"
                inactive-value="1"
                active-color="#1DC8A4"
                @change="
                  changeStatus(scope.row.status, scope.row.id, scope.$index)
                "
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="奖品" prop="award" min-width="100">
            <template slot-scope="scope">
              <el-link
                type="primary"
                :underline="false"
                @click="handleViewAward(scope.row.award, scope.row)"
              >
                {{ scope.row.award }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column
            label="图文作业权限"
            prop="workPermission"
            min-width="120"
          >
            <template slot-scope="scope">
              <span
                :class="[
                  'tag-span',
                  scope.row.workPermission === '已开通' ? 'success' : 'info'
                ]"
                >{{ scope.row.workPermission }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="分享权限"
            prop="sharePermission"
            min-width="80"
          >
            <template slot-scope="scope">
              <span
                :class="[
                  'tag-span',
                  scope.row.sharePermission === '已开通' ? 'success' : 'info'
                ]"
                >{{ scope.row.sharePermission }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="点赞权限"
            prop="likePermission"
            min-width="80"
          >
            <template slot-scope="scope">
              <span
                :class="[
                  'tag-span',
                  scope.row.likePermission === '已开通' ? 'success' : 'info'
                ]"
                >{{ scope.row.likePermission }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="编辑人"
            prop="eitor"
            min-width="100"
          ></el-table-column>
          <el-table-column
            label="创建时间"
            prop="createrDate"
            min-width="160"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" width="90">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.row.id)">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="LoadData"
        ></pageCom>
        <!-- 条件用户drawer -->
        <conditionDrawer
          v-if="dialogCondition.isShow"
          :dialog-data="dialogCondition"
        ></conditionDrawer>
        <!-- 消息设置drawer -->
        <settingDrawer
          v-if="dialogData.isShow"
          :dialog-data="dialogData"
          @addEdit-success="LoadData"
        ></settingDrawer>
        <!-- 添加奖品 dialog -->
        <addAwardDialog
          v-if="addAwardDialog.isShow"
          :dialog-data="addAwardDialog"
        ></addAwardDialog>

        <!-- 查看发放奖品记录 dialog -->
        <recordDialog
          v-if="recordDialog.isShow"
          :dialog-data="recordDialog"
        ></recordDialog>
      </div>
    </div>
  </div>
</template>

<script>
import topSearch from '@component/behaviorManagement/attributeManage/topSearch' // 上部搜索条件
import conditionDrawer from '@component/behaviorManagement/attributeManage/conditionDrawer' // 条件用户
import settingDrawer from '@component/behaviorManagement/attributeManage/settingDrawer' // 消息设置
import addAwardDialog from '@component/behaviorManagement/attributeManage/addAwardDialog' // 添加奖品
import recordDialog from '@component/behaviorManagement/attributeManage/recordDialog' // 查看详情

export default {
  name: 'AttributeList',
  msg: '属性管理',
  components: {
    topSearch,
    conditionDrawer,
    settingDrawer,
    addAwardDialog,
    recordDialog
  },
  data() {
    return {
      loading: true,
      page: 1, // 当前页数
      row: 10, // 页面显示条数
      total: 50,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      tableData: [
        {
          id: 1,
          dapengNum: 'HJSASA3232',
          nickName: '风之子',
          phone: '1379018967',
          status: '0',
          award: '听课劵',
          workPermission: '已开通',
          sharePermission: '已开通',
          likePermission: '未开通',
          eitor: '徐敏',
          createrDate: '2019-09-12'
        },
        {
          id: 2,
          dapengNum: 'HJSASA3232',
          nickName: '风之子',
          phone: '1379018967',
          status: '0',
          award: '听课劵',
          workPermission: '已开通',
          sharePermission: '已开通',
          likePermission: '未开通',
          eitor: '徐敏',
          createrDate: '2019-09-12'
        },
        {
          id: 3,
          dapengNum: 'HJSASA3232',
          nickName: '风之子',
          phone: '1379018967',
          status: '0',
          award: '听课劵',
          workPermission: '已开通',
          sharePermission: '已开通',
          likePermission: '未开通',
          eitor: '徐敏',
          createrDate: '2019-09-12'
        },
        {
          id: 4,
          dapengNum: 'HJSASA3232',
          nickName: '风之子',
          phone: '1379018967',
          status: '0',
          award: '听课劵',
          workPermission: '已开通',
          sharePermission: '已开通',
          likePermission: '未开通',
          eitor: '徐敏',
          createrDate: '2019-09-12'
        },
        {
          id: 5,
          dapengNum: 'HJSASA3232',
          nickName: '风之子',
          phone: '1379018967',
          status: '0',
          award: '听课劵',
          workPermission: '已开通',
          sharePermission: '已开通',
          likePermission: '未开通',
          eitor: '徐敏',
          createrDate: '2019-09-12'
        },
        {
          id: 6,
          dapengNum: 'HJSASA3232',
          nickName: '风之子',
          phone: '1379018967',
          status: '0',
          award: '听课劵',
          workPermission: '已开通',
          sharePermission: '已开通',
          likePermission: '未开通',
          eitor: '徐敏',
          createrDate: '2019-09-12'
        }
      ],
      formInline: {
        // 搜索条件
        data: '', // 修改时间
        editer: '', // 编辑人
        checkStatus: '', // 权限状态
        checkContext: ''
      },
      // 消息设置
      dialogData: {
        isShow: false
      },
      // 条件用户
      dialogCondition: {
        isShow: false
      },
      // 添加奖品
      addAwardDialog: {
        isShow: false
      },
      recordDialog: {
        isShow: false
      }
    }
  },
  mounted() {
    this.LoadData()
  },
  methods: {
    /* 获取列表 */
    LoadData() {
      this.loading = false
    },
    // 消息设置
    handleMessageSet(type, params = '') {
      this.dialogData.isShow = true
    },
    // 条件过滤
    handleCondition() {
      this.dialogCondition.isShow = true
    },
    // 编辑，添加奖品
    handleEdit() {
      this.addAwardDialog.isShow = true
    },
    // 查看详情
    handleViewAward() {
      this.recordDialog.isShow = true
    },
    /* 搜索 */
    toSearch() {},
    /* 重置 */
    reset() {},
    // 状态切换提示
    changeStatus(status, id, index) {
      // 只有关闭才会弹框
      if (status === 1) {
        // 关闭
        this.$confirm('确认要停用该属性吗？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '已停用'
            })
          })
          .catch(() => {
            this.tableData[index].status = '0'
            /* this.$message({
               type: "info",
               message: "已取消停用"
             }); */
          })
      } else {
        // 启用
        this.$message.success('已启用')
      }
    },
    /* 换页 */
    changePage(page) {
      this.page = page
      this.LoadData()
    }
  }
}
</script>

<style lang="less" scope>
#attributeList {
  @text-color: #fff;
  .table {
    //reset tag
    .el-tag--info {
      color: @text-color;
      background-color: #999a9c;
    }
    .el-tag--success {
      color: @text-color;
    }
    .el-tag--warning {
      color: @text-color;
      background-color: #ff8c00;
    }
  }
}
</style>
